{% extends "base/index.html" %}

{% block center %}

    <!--用户信息-->
    <div class="panel panel-default center-top" style="min-width:auto;">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-6">
                    <a href="" class="btn btn-sm btn-success" data-toggle="modal" data-target="#userModal">添加</a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-hover">
                <thead>
                <tr style="background-color: #f5f5f5;">
                    <th>ID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>角色</th>
                    <th>超级管理员</th>
                    <th>登陆状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for i in data_list %}
                    <tr name="tbody">
                        <td>{{ i.id }}</td>
                        <td>{{ i.username }}</td>
                        <td>{{ i.nick_name }}</td>
                        <td>{{ i.role.title }}</td>

                        {% if i.is_superuser == "1" %}
                            <td><span class="label label-success">是</span></td>
                        {% else %}
                            <td><span class="label label-default">否</span></td>
                        {% endif %}

                        {% if i.is_online == "online" %}
                            <td><span class="label label-success">{{ i.is_online }}</span></td>
                        {% else %}
                            <td><span class="label label-default">{{ i.is_online }}</span></td>
                        {% endif %}

                        <td>
                            <a href="javascript:;" name="edit-user" user_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="left" title="修改"><span class="fa fa-pencil"></span>
                            </a>&nbsp;&nbsp;&nbsp;
                            <a href="javascript:;" name="ch-passwd" user_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="top" title="修改密码"><span class="fa fa-cog"></span>
                            </a>&nbsp;&nbsp;&nbsp;

                            <a href="javascript:;" name="remote-user" user_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="top" title="服务器用户"><span class="fa fa-key"></span>
                            </a>&nbsp;&nbsp;&nbsp;
                            <a href="javascript:;" name="del-user" user_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="text-right" style="margin-top:-30px;padding-right:9%">
                <ul class="pagination" id="pager">
                    <li class="previous"><a href="/rbac/user/1/">首页</a></li>
                    {#上一页按钮开始#}
                    {# 如果当前页有上一页#}
                    {% if data_list.has_previous %}
                        {#  当前页的上一页按钮正常使用#}
                        <li class="previous"><a href="/rbac/user/{{ data_list.previous_page_number }}/">上一页</a></li>
                    {% else %}
                        {# 当前页的不存在上一页时,上一页的按钮不可用#}
                        <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                    {% endif %}
                    {#上一页按钮结束#}
                    {# 页码开始#}
                    {% for num in page_list %}
                        {% if num == currentPage %}
                            <li class="item active"><a href="/rbac/user/{{ num }}/">{{ num }}</a></li>
                        {% else %}
                            <li class="item"><a href="/rbac/user/{{ num }}/">{{ num }}</a></li>
                        {% endif %}
                    {% endfor %}
                    {#页码结束#}
                    {# 下一页按钮开始#}
                    {% if data_list.has_next %}
                        <li class="next"><a href="/rbac/user/{{ data_list.next_page_number }}/">下一页</a></li>
                    {% else %}
                        <li class="next disabled"><a href="javascript:;">下一页</a></li>
                    {% endif %}
                    <li class="previous"><a href="/rbac/user/{{ page_nums }}/">尾页</a></li>
                    {# 下一页按钮结束#}
                </ul>
            </div>

        </div>
    </div>

{% endblock %}

<!-- Modal -->
{% block modal %}

    <!--添加用户-->
    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="userModalLabel">添加</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" placeholder="用户名" id="username">
                    </div>
                    <div class="form-group">
                        <label>昵称</label>
                        <input class="form-control" placeholder="昵称" id="nick-name">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" placeholder="密码" id="password">
                    </div>

                    <div class="form-group">
                        <label>超级管理员</label>
                        <select class="form-control" id="is-superuser">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>角色</label>
                        <select class="form-control" id="role-id">
                            {% for i in role_list %}
                                <option value="{{ i.id }}">{{ i.title }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add-user">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改用户信息-->
    <div class="modal fade" id="edit-userModal" tabindex="-1" role="dialog" aria-labelledby="edit-userModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-userModalLabel">修改</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" placeholder="用户名" id="edit-username">
                    </div>
                    <div class="form-group">
                        <label>昵称</label>
                        <input class="form-control" placeholder="昵称" id="edit-nick-name">
                    </div>

                    <div class="form-group">
                        <label>超级管理员</label>
                        <select class="form-control" id="edit-is-superuser">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>角色</label>
                        <select class="form-control" id="edit-role-id">
                            {% for i in role_list %}
                                <option value="{{ i.id }}">{{ i.title }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-user">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改用户密码-->
    <div class="modal fade" id="passwdModal" tabindex="-1" role="dialog" aria-labelledby="passwdModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="passwdModalLabel">修改密码</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>新密码</label>
                        <input class="form-control" type="password" placeholder="新密码" id="new-password">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-password">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!--添加远程管理用户-->
    <div class="modal fade" id="rbac-remoteModal" tabindex="-1" role="dialog" aria-labelledby="rbac-remoteModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="rbac-remoteModalLabel">远程登陆用户</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>登陆用户</label>
                        <input class="form-control" type="text" placeholder="登陆用户" id="lg-user">
                    </div>
                    <div class="form-group">
                        <label>登陆密码</label>
                        <input class="form-control" type="password" placeholder="密码" id="lg-passwd">
                    </div>
                    <div class="form-group">
                        <label>登陆秘钥</label>
                        <textarea class="form-control" placeholder="登录秘钥" id="lg-key"></textarea>
                    </div>
                    <div class="form-group">
                        <label>秘钥密码</label>
                        <input class="form-control" type="password" placeholder="秘钥密码" id="lg-key-pass">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-remote">提交</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

    <script type="text/javascript" src="/static/mystyle/js/rbac.js"></script>

    <script>
    //远程管理用户
    $("td a[name='remote-user']").click(function(){
        var user_id = $(this).attr('user_id');
        $.post("/rbac/addlguser/",{"user_id":user_id},function (data) {
            var ret = eval('(' + data + ')');
            $("#lg-user").val(ret.login_user);
            $("#lg-passwd").val(ret.login_passwd);
            $("#lg-key").val(ret.login_id_rsa);
            $("#lg-key-pass").val(ret.id_rsa_pwd);
            $("#sub-remote").attr("lg_id",ret.lg_id);
            });
        $("#rbac-remoteModal").modal('show');
        //修改密码
        $("#sub-remote").click(function(){
            var login_user = $("#lg-user").val();
            var login_passwd = $("#lg-passwd").val();
            var login_id_rsa = $("#lg-key").val();
            var id_rsa_pwd = $("#lg-key-pass").val();
            var lg_id = $(this).attr("lg_id");
            $.post("/rbac/addlguser/",{"login_user":login_user,"login_passwd":login_passwd,"login_id_rsa":login_id_rsa,
                "id_rsa_pwd":id_rsa_pwd,"user_id":user_id,"action":"add","lg_id":lg_id},function(data){
                var ret = eval('(' + data + ')');
                if(ret.status =="Flase"){
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                }else {
                    $("#rbac-remoteModal").modal("hide");
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()",2000);
                }
            });
        });
    });
    </script>

{% endblock %}